<template style='height: 100%'>
  <div id='addPubCloud' style=' width:100%;height: 87vh;'>
    <!-- 基本信息 -->
    <div class='center'>
      <div v-if="cloudPlatFormStepFormShow" key="cloudPlatFormStep">
        <el-form :model='pubCloudForm' ref='cloudForm' :rules='rules' label-width='100px'>
          <el-form-item :label="$t('cloudForm.platformName')" prop='platformName'>
            <el-input v-model='pubCloudForm.platformName' style='width: 300px;' placeholder='请输入云平台名称'></el-input>
          </el-form-item>
          <el-form-item :label="$t('cloudForm.platformType')" prop='apiProvider'>
            <el-select v-model='pubCloudForm.apiProvider' placeholder='请选择'
                       style='width : 300px ;'>
              <el-option v-for='item in datacenters' :label='item' :key='item'
                         :value='item'></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('cloudForm.secretId')" prop='secretId'>
            <el-input v-model='pubCloudForm.secretId' style='width: 300px;' placeholder='请输入Secret Id'></el-input>
          </el-form-item>
          <el-form-item :label="$t('cloudForm.secretKey')" prop='secretKey'>
            <el-input type="password" v-model='pubCloudForm.secretKey' style='width: 300px;' placeholder='请输入Secret Key'></el-input>
          </el-form-item>

        </el-form>
      </div>

      <div v-if="vdcResourceStepFormShow" key="containerStep">

        <el-form :model='pubCloudForm' ref='cloudForm' :rules='rules' label-width='100px'>
<!--          <el-form-item :label="$t('cloudForm.platformName')" prop='platformName'>-->
<!--            <el-input v-model='pubCloudForm.platformName' style='width: 300px;' placeholder='请输入云平台名称'></el-input>-->
<!--          </el-form-item>-->


          <el-form-item :label="$t('cloudForm.regionName')" prop="regionName" class="form-item-validate">
            <el-select v-model="pubCloudForm.regionId" style="width: 300px" :placeholder='请选择'
                       @change="onRegionChange" >
              <el-option v-for="option in regionDataCache" :label="option.localName" :key="option.regionId"
                         :value="option.regionId"/>
            </el-select>
          </el-form-item>

          <el-form-item :label="$t('cloudForm.cloudProvider')" prop='cloudProvider'>
            <el-input v-model='pubCloudForm.cloudProvider' disabled  style='width : 300px ;'></el-input>
          </el-form-item>

          <el-form-item :label="$t('cloudForm.cpuQuota')" prop='cpuQuota'>
            <el-input-number v-model='pubCloudForm.cpuQuota'  :min="1" :max="1000" label="" style='width : 300px ;'></el-input-number>
          </el-form-item>

          <el-form-item :label="$t('cloudForm.memQuota')" prop='memQuota'>
            <el-input-number v-model='pubCloudForm.memQuota'  :min="1" :max="1000" label="" style='width : 300px ;'></el-input-number>
          </el-form-item>

          <el-form-item :label="$t('cloudForm.capacityQuota')" prop='capacityQuota'>
            <el-input-number v-model='pubCloudForm.capacityQuota'  :min="1" :max="1000" label="" style='width : 300px ;'></el-input-number>
          </el-form-item>

          <el-form-item :label="$t('cloudForm.bandwidthQuota')" prop='bandwidthQuota'>
            <el-input-number v-model='pubCloudForm.bandwidthQuota'  :min="1" :max="1000" label="" style='width : 300px ;'></el-input-number>
          </el-form-item>

        </el-form>
      </div>

    </div>
    <!-- 操作区 -->
    <div :style='footButtonStyle()'>
      <el-button style='margin-left: 8%;' size='mini' @click='validateConnection' type='primary'>{{ $t('btn.testConnect') }}</el-button>
      <el-button type='primary' v-if='cloudPlatFormStepFormShow' @click='onNext' size='mini'>{{ $t('btn.next') }}</el-button>
      <el-button type='primary' v-if='vdcResourceStepFormShow' @click='onSave' size='mini'>{{ $t('btn.save') }}</el-button>
      <el-button @click='onCancel' size='mini'>{{ $t('btn.cancel') }}</el-button>
    </div>
  </div>

</template>
<style lang='scss'>
#addPubCloud {
  & .center {
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
  }

  & .el-form-item {
    margin: 25px 0px;
  }

  & .subnet-block {
    position: relative;
    left: 50%;
    margin-left: -413px;
    width: 850px
  }

  & .el-input--suffix .el-input__inner {
    padding-right: 15px;
  }

  & .ip-segment-part {
    width: 50px;
  }
}
</style>
<script>
import local from './js/local'
import cloudApi from '@/api/pubCloudApi'

export default {
  i18n: {
    messages: local
  },
  mixins: [parent],
  data() {
    return {
      cloudPlatFormStepFormShow: true, // 第一个页面
      vdcResourceStepFormShow: false, // 第二个页面
      isAdd: false,
      regionDataCache: [],
      id: '',
      pubCloudForm: {
        platformName: '',
        apiProvider: '',
        cloudProvider: '',
        secretId: '',
        secretKey: '',
        regionId: '',
        regionName: '',
        vmQuota: '100', // 实例配额
        vpcQuota: '100', // VPC网络
        diskNumQuota: '100', // 数据盘块数
        diskCapacityQuota: '1000', // 数据盘容量
        rdsQuota: '100', // 数据库配额
        cpuQuota: 0,
        memQuota: 0,
        capacityQuota: 0,
        bandwidthQuota: 0,
      },
      datacenters: [],
      rules: {
        secretId: { required: true, message: '请填写Secret Id', trigger: 'blur' },
        secretKey: { required: true, message: '请填写Secret Key', trigger: 'blur' },
        platformName: { required: true, message: '请填写云平台名称', trigger: 'blur' },
        apiProvider: { required: true, message: '请选择地域信息', trigger: 'blur' },
        cloudProvider: { required: true, message: '请选择地域信息', trigger: 'blur' }
      }
    }
  },
  mounted() {
    this.getDataCenterList()
  },
  methods: {
    validateConnection() {
      const self = this
      self.$refs['cloudForm'].validate((valid) => {
        if (valid) {
          this.showLoading = true
          debugger
          cloudApi.validateConnectionRequesttest(this.pubCloudForm).then(({ data }) => {
            this.showLoading = false
            self.regionDataCache = data
            self.$message({
              message: self.$t('msg.connect_test_success'),
              type: 'success'
            })
          }).catch((error) => {
            this.showLoading = false
            if (error && error.msg) {
              self.$message({
                message: error.msg,
                type: 'error'
              })
            }
          })
        }
      })
    },
    getDataCenterList() {
      // 获取datacenter Option
      cloudApi.vdcTypeRequest().then(({ data }) => {
        this.datacenters = data
      }).catch((error) => {
        console.log(error)
      })
    },
    onSave() {
      this.$refs['cloudForm'].validate((valid) => {
        if (!valid) {
          this.$message({
            showClose: true,
            message: this.$t('cloudForm.errorMessage'),
            type: 'error'
          })
        } else {
          const params = {
            platformName: this.pubCloudForm.platformName,
            apiProvider: this.pubCloudForm.apiProvider,
            cloudProvider: this.pubCloudForm.cloudProvider,
            secretId: this.pubCloudForm.secretId,
            secretKey: this.pubCloudForm.secretKey,
            regionId: this.pubCloudForm.regionId,
            regionName: this.pubCloudForm.regionName,
            vmQuota: this.pubCloudForm.vmQuota,
            vpcQuota: this.pubCloudForm.vpcQuota,
            diskNumQuota: this.pubCloudForm.diskNumQuota,
            diskCapacityQuota: this.pubCloudForm.diskCapacityQuota,
            rdsQuota: this.pubCloudForm.rdsQuota,
            cpuQuota: this.pubCloudForm.cpuQuota,
            memQuota: this.pubCloudForm.memQuota,
            capacityQuota: this.pubCloudForm.capacityQuota,
            bandwidthQuota: this.pubCloudForm.bandwidthQuota

          }
          cloudApi.vdcCreateRequest(params).then(({ data }) => {
            this.$router.push({ name: 'pubCloudList' })
          }).catch((error) => {
            this.$message({
              showClose: true,
              message: error.msg,
              type: 'error'
            })
          })
        }
      })
    },
    onRegionChange(regionId) {
      for (let i = 0; i < this.regionDataCache.length; i++) {
        debugger
        if (regionId === this.regionDataCache[i]['regionId']) {
          // TODO:在region修改后加载zone的信息,此处可以考虑适当在增加缓存
          this.pubCloudForm.regionName = this.regionDataCache[i]['localName']
          this.pubCloudForm.cloudProvider = this.regionDataCache[i]['cloudProvider']
          break
        }
      }
    },
    onNext() {
      this.$refs['cloudForm'].validate((valid) => {
        if (!valid) {
          this.$message({
            showClose: true,
            message: this.$t('volume.errorMessage'),
            type: 'error'
          })
        } else {
          // const params = {
          //   platformName: this.pubCloudForm.platformName,
          //   platformType: this.pubCloudForm.platformType,
          //   secretId: this.pubCloudForm.secretId,
          //   secretKey: this.pubCloudForm.secretKey
          // }
          // cloudApi.vdcCreateRequest(params).then(({ data }) => {
          //   this.$router.push({ name: 'pubCloudList' })
          // }).catch((error) => {
          //   this.$message({
          //     showClose: true,
          //     message: error.msg,
          //     type: 'error'
          //   })
          // })
          // 调用测试接口

          const self = this
          self.$refs['cloudForm'].validate((valid) => {
            if (valid) {
              self.showLoading = true

              cloudApi.validateConnectionRequesttest(this.pubCloudForm).then(({ data }) => {
                self.showLoading = false
                self.regionDataCache = data
                self.cloudPlatFormStepFormShow = false
                self.vdcResourceStepFormShow = true
              }).catch((error) => {
                this.showLoading = false
                if (error && error.msg) {
                  self.$message({
                    message: error.msg,
                    type: 'error'
                  })
                }
              })
            }
          })
        }
      })
    },
    onCancel() {
      this.$router.push({ name: 'pubCloudList' })
    },
    footButtonStyle(length) {
      if (length !== 0) {
        return 'text-align:center;margin-top:30px'
      } else {
        return 'text-align:center;margin-top:50px'
      }
    },
    isEmpty(obj) {
      if (obj == null || obj === '' || obj === undefined) {
        return true
      }
      return false
    }
  },
  watch: {
    importProgress(val) {
      if (val === 100) {
        this.form.uploadStatus = 3
      } else if (val === -1) {
        this.form.uploadStatus = 4
      }
    }
  },
  computed: {}
}
</script>
